<template>
    <div :class="{ 'dialog': !flag, 'dialog_active': flag }" @touchmove.prevent.stop @wheel.prevent.stop
        @click="flag = false">
        <div class="dialogBox" @click.stop>
            <div class="header flex">
                <div class="title">退费明细</div>
                <img src="../../assets/refund_close.png" alt="" @click="close">
            </div>
            <div class="mian">
                <div class="left">
                    <div class="pTitle">具体信息</div>
                    <div class="statusBox flex">
                        <div class="status flex" :class="{ 'status_active1': queryData.status == 9 }">
                            <img src="../../assets/refund_icon1.png" alt="" v-if="queryData.status != 9">
                            <img src="../../assets/refund_icon4.png" alt="" v-if="queryData.status == 9">
                            <p>已通过</p>
                        </div>
                        <div class="status flex"
                            :class="{ 'status_active2': queryData.status == 1 || queryData.status == 2 }">
                            <img src="../../assets/refund_icon2.png" alt=""
                                v-if="queryData.status != 1 && queryData.status != 2">
                            <img src="../../assets/refund_icon5.png" alt=""
                                v-if="queryData.status == 1 || queryData.status == 2">
                            <p>审批中</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active3': queryData.status == 3 }">
                            <img src="../../assets/refund_icon7.png" alt="" v-if="queryData.status != 3">
                            <img src="../../assets/refund_icon10.png" alt="" v-if="queryData.status == 3">
                            <p>未通过</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active4': queryData.status == 0 }">
                            <img src="../../assets/refund_icon3.png" alt="" v-if="queryData.status != 0">
                            <img src="../../assets/refund_icon6.png" alt="" v-if="queryData.status == 0">
                            <p>未审批</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active5': queryData.status == 4 }">
                            <img src="../../assets/refund_icon8.png" alt="" v-if="queryData.status != 4">
                            <img src="../../assets/refund_icon9.png" alt="" v-if="queryData.status == 4">
                            <p>已退费</p>
                        </div>
                        <!-- <div class="status flex" :class="{ 'status_active1': queryData.status == 9 }">
                            <img src="../../assets/refund_icon1.png" alt="" v-if="queryData.status != 9">
                            <img src="../../assets/refund_icon4.png" alt="" v-if="queryData.status == 9">
                            <p>已通过</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active2': queryData.status == 1 }">
                            <img src="../../assets/refund_icon2.png" alt="" v-if="queryData.status != 1">
                            <img src="../../assets/refund_icon5.png" alt="" v-if="queryData.status == 1">
                            <p>审批中</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active3': [2, 3, 4, 5].includes(queryData.status) }">
                            <img src="../../assets/refund_icon7.png" alt="" v-if="![2, 3, 4, 5].includes(queryData.status) ">
                            <img src="../../assets/refund_icon10.png" alt="" v-if="[2, 3, 4, 5].includes(queryData.status)">
                            <p>已拒绝</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active4': queryData.status == 0 }">
                            <img src="../../assets/refund_icon3.png" alt="" v-if="queryData.status != 0">
                            <img src="../../assets/refund_icon6.png" alt="" v-if="queryData.status == 0">
                            <p>未审批</p>
                        </div>
                        <div class="status flex" :class="{ 'status_active5': queryData.status == 4 }">
                            <img src="../../assets/refund_icon8.png" alt="" v-if="queryData.status != 4">
                            <img src="../../assets/refund_icon9.png" alt="" v-if="queryData.status == 4">
                            <p>已退费</p>
                        </div> -->
                    </div>
                    <div class="inform">
                        <div class="inform_li flex">
                            <p>学生姓名</p>
                            <div class="borderBox">{{ queryData.studentName }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>学生学号</p>
                            <div class="borderBox">{{ queryData.studentNumber }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>申请人身份证号</p>
                            <div class="borderBox">{{ queryData.idCard }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>联系电话</p>
                            <div class="borderBox">{{ queryData.mobile }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>退款银行</p>
                            <div class="borderBox">{{ queryData.bankName }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>退款银行开户行</p>
                            <div class="borderBox">{{ queryData.bankAddress }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>银行卡号</p>
                            <div class="borderBox">{{ queryData.backCode }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>退款原因</p>
                            <div class="borderBox">
                                <el-text truncated style="color: #000;font-size: 14px; ">{{
        queryData.applyReason }}</el-text>
                            </div>
                        </div>
                        <div class="inform_li flex">
                            <p>申请时间</p>
                            <div class="borderBox">{{ queryData.createTime }}</div>
                        </div>
                        <div class="inform_li flex">
                            <p>证明</p>
                            <div class="imgBox">
                                <!-- <img :src="queryData.backCodeImg" alt="">
                                <img :src="queryData.idCardImg" alt="">
                                <img :src="queryData.cardBookImg" alt="">
                                <img :src="queryData.studentBookImg" alt=""> -->

                                <el-image style="width: 75px; height: 55px" :src="item" lazy
                                    v-for="(item, index) in imageData" :key="index" :zoom-rate="1.2" :max-scale="7"
                                    :min-scale="0.2" :preview-src-list="imageData" :initial-index="index" fit="cover" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="pTitle">审批流程</div>
                    <div class="status_li flex" v-for="item in approveData" :key="item.id">
                        <p class="pName">{{ item.teacherName }}</p>
                        <div style="display: flex; flex-direction:column ;  ">

                            <div class="flex">
                                <p class="pStatus" :class="{ 'pStatus1': true }" v-if="item.status == 2">
                                    <span class="circle" :class="{ 'circle1': true }"></span>
                                    <span>已通过</span>
                                </p>
                                <p class="pStatus" :class="{ 'pStatus2': true }" v-if="item.status == 1">
                                    <span class="circle" :class="{ 'circle2': true }"></span>
                                    <span>已通过</span>
                                </p>
                                <p class="pStatus" :class="{ 'pStatus3': true }" v-if="!item.status">
                                    <span class="circle" :class="{ 'circle3': true }"></span>
                                    <span>待审批</span>
                                </p>
                                <p class="pTime">{{ item.createTime }}</p>
                            </div>
                            <div class="status_box" v-if="item.level == 1">
                                离校时间：{{ item.leaveDate }}
                            </div>
                            <div class="status_box" v-if="item.level == 2">
                                在校时长：{{ item.years }}个月、缴费金额：{{ item.amount }}元
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";

export default {

    data() {
        return {

            flag: false,
            queryData: {
                status: "",
                studentName: "",
                studentNumber: "",
                idCard: "",
                mobile: "",
                bankName: "",
                bankAddress: "",
                applyReason: "",
                createTime: "",
                backCodeImg: "",
                idCardImg: "",
                cardBookImg: "",
                studentBookImg: "",
            },
            approveData: [],
            imageData: [],
        };
    },
    components: {

    },

    mounted() {
    },
    methods: {
        close() {
            this.queryData = {}
            this.approveData = []
            this.imageData = []
            this.claer()
            this.flag = false
        },

        claer() {
            this.queryData.status = ""
            this.queryData.studentName = ""
            this.queryData.studentNumber = ""
            this.queryData.idCard = ""
            this.queryData.mobile = ""
            this.queryData.bankName = ""
            this.queryData.bankAddress = ""
            this.queryData.applyReason = ""
            this.queryData.createTime = ""
        },

        handleImageLoad(index) {
            console.log("加载", index);
        },

        handleImageError(index) {
            console.log("错误", index);
        },

        getDetail(id) {
            httpService(
                "/javaApi/paymentRefund/queryById", { id: id }, "get"
            ).then((data) => {
                this.queryData = data
                if (data.createTime) {
                    this.queryData.createTime = formatTime1(data.createTime)
                    this.queryData.backCodeImg = 'https://wx.zhengzhong.cn' + data.backCodeImg
                    this.queryData.idCardImg = 'https://wx.zhengzhong.cn' + data.idCardImg
                    this.queryData.cardBookImg = 'https://wx.zhengzhong.cn' + data.cardBookImg
                    this.queryData.studentBookImg = 'https://wx.zhengzhong.cn' + data.studentBookImg
                    this.imageData = [this.queryData.backCodeImg, this.queryData.idCardImg, this.queryData.cardBookImg, this.queryData.studentBookImg,]
                }
            });
        },

        getApprove(id) {
            console.log(id);
            httpService(
                "/javaApi/paymentRefund/detail", { id: id }, "get"
            ).then((data) => {
                this.approveData = data
            });
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dialog_active {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dialogBox {
    width: 975px;
    height: 750px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    overflow: hidden;
}

.header {
    background: url(../../assets/refundDetail_headerBg.png) no-repeat;
    background-size: 100% 100%;
    height: 64px;
    justify-content: space-between;
    padding: 0 25px;
    font-size: 18px;
    color: #000;
}

.mian {
    display: flex;
}

.left {
    padding-left: 25px;
    width: 60%;
    border-right: 1px solid #DEE1E5;
}

.pTitle {
    color: #000;
    font-size: 17px;
    margin: 26px 0 20px 0;
}

.status {
    width: 87px;
    height: 32px;
    background-color: #F5F6F8;
    border-radius: 5px;
    margin-right: 15px;
    justify-content: center;
    font-size: 14px;
    color: #000;
}

.status_active1 {
    background-color: #25C351 !important;
    color: #fff !important;
}

.status_active2 {
    background-color: #007EFF !important;
    color: #fff !important;
}

.status_active3 {
    background-color: #FF2C2C !important;
    color: #fff !important;
}

.status_active4 {
    background-color: #898989 !important;
    color: #fff !important;
}

.status_active5 {
    background-color: #25C351 !important;
    color: #fff !important;
}

.status img {
    width: 16px;
    margin-right: 9px;
}

.inform {
    margin-top: 20px;
}

.inform_li {
    margin-bottom: 10px;

}

.inform_li p {
    color: #000;
    font-size: 14px;
    width: 150px;
}

.borderBox {
    border: 1px solid #DEE1E5;
    width: 330px;
    height: 40px;
    line-height: 40px;
    padding: 0px 0 0px 15px;
    color: #000;
    font-size: 14px;
    border-radius: 5px;
}

.imgBox {
    border: 1px solid #DEE1E5;
    width: 325px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.imgBox img {
    width: 75px;
    height: 55px;
}


.right {
    padding-left: 30px;
}

.pName {
    color: #000;
    font-size: 14px;
    margin-right: 26px;
    width: 45px;
}

.pTime {
    color: #A9A9A9;
    font-size: 13px;
}

.status_li {
    margin-top: 20px;
    align-items: start;
}

.pStatus {
    margin-right: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.pStatus1 {
    color: #FF0000;
}

.pStatus2 {
    color: #4187FD;
}

.pStatus3 {
    color: #FF8400;
}

.circle {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 3px;
    margin-right: 5px;
}

.circle1 {
    background-color: #FF0000;
}

.circle2 {
    background-color: #4187FD;
}

.circle3 {
    background-color: #FF8400;
}

.status_box {
    font-size: 14px;
    margin-top: 10px;
}
</style>